<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #myProgress {
            width: 100%;
            height: 30px;
            position: relative;
            background-color: #ddd;
        }

        #myBar {
            background-color: #4CAF50;
            width: 10px;
            height: 30px;
            position: absolute;
        }
    </style>
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script>

        function move() {
            $("#myBar").animate({
                width:"+=100px"
            },200)
        }

    </script>

</head>
<body>
<h1>JavaScript 进度条</h1>

<div id="myProgress">
    <div id="myBar"></div>
</div>

<br>
<button onclick="move()">点我</button>
</body>
</html>